<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenLayers实现动态线效果</title>
    <link rel="stylesheet" href="../assets/v6.15.1-dist/ol.css">
    <script src="../assets/v6.15.1-dist/ol.js"></script>
    <!-- <script src="./assets/openlayersPlugins/move-line.js"></script> -->
    <!-- <script src="./assets/openlayersPlugins/move-line-two.js"></script> -->
    <script src="./assets/openlayersPlugins/move-line-three.js"></script>

    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .map {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .btns-box {
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 999;
            padding: 5px 10px;
            border-radius: 10px;
            color: #fff;
            line-height: 30px;
            background: rgba(0, 0, 0, 0.6);
        }
    </style>
</head>

<body>
    <div id="map" class="map"></div>
    <div class="btns-box">
        <div class="add-btn" id="add">添加</div>
        <div class="remove-btn" id="remove">移除</div>
    </div>

    <script>
        const tianditu_satellite_layer = new ol.layer.Tile({
            name: '天地图卫星影像',
            source: new ol.source.XYZ({
                // url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=您的密钥',
                url: 'http://t5.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=6a9f4b408cb773ba60fb639f3b713d61'
            })
        })

        const tianditu_satellite_label_layer = new ol.layer.Tile({
            name: '天地图卫星影像标注',
            source: new ol.source.XYZ({
                url: 'http://t5.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=6a9f4b408cb773ba60fb639f3b713d61'
            })
        })

        let vec_c = getTdtLayer("vec_w");
        let cva_c = getTdtLayer("cva_w");
        let view = new ol.View({
            center: [103.736, 31.215],
            zoom: 7,
            projection: "EPSG:4326"
        });
        map = new ol.Map({
            controls: ol.control.defaults({
                attribution: false
            }),
            target: 'map',
            // layers: [vec_c, cva_c],
            layers: [tianditu_satellite_layer, tianditu_satellite_label_layer],
            view: view
        });

        function getTdtLayer(lyr) {
            // var url = "http://t{0-7}.tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}";
            let url = "http://t0.tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}";
            let layer = new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: url
                })
            });
            return layer;
        }

        let siteList = [
            {
                "id": 110,
                "areaCode": "510100",
                "stationName": "成都森林站",
                "latitude": "31.215",
                "longitude": "103.736"
            },
            {
                "id": 111,
                "areaCode": "511800",
                "stationName": "雅安森林站",
                "latitude": "29.701",
                "longitude": "102.841"
            },
            {
                "id": 112,
                "areaCode": "513400",
                "stationName": "凉山森林站",
                "latitude": "28.034",
                "longitude": "102.208"
            },
            {
                "id": 113,
                "areaCode": "513300",
                "stationName": "贡嘎山森林站",
                "latitude": "29.647",
                "longitude": "102.118"
            },
            {
                "id": 114,
                "areaCode": "513200",
                "stationName": "岷山森林站",
                "latitude": "31.696",
                "longitude": "103.896"
            },
            {
                "id": 115,
                "areaCode": "513200",
                "stationName": "若尔盖湿地站",
                "latitude": "32.833",
                "longitude": "102.582"
            },
            {
                "id": 116,
                "areaCode": "510800",
                "stationName": "翠云廊森林站",
                "latitude": "32.143",
                "longitude": "105.53"
            },
            {
                "id": 117,
                "areaCode": "511900",
                "stationName": "光雾山森林站",
                "latitude": "32.677",
                "longitude": "106.821"
            },
            {
                "id": 118,
                "areaCode": "511300",
                "stationName": "升钟湖湿地站",
                "latitude": "31.5402",
                "longitude": "105.746"
            },
            {
                "id": 119,
                "areaCode": "510100",
                "stationName": "蒲江麟凤农业站",
                "latitude": "30.206",
                "longitude": "103.392"
            },
            {
                "id": 120,
                "areaCode": "510100",
                "stationName": "鲁家滩湿地站",
                "latitude": "30.714",
                "longitude": "103.759"
            },
            {
                "id": 121,
                "areaCode": "510100",
                "stationName": "天台山马坪森林站",
                "latitude": "30.29",
                "longitude": "103.144"
            },
            {
                "id": 122,
                "areaCode": "510100",
                "stationName": "紫坪铺水库湿地站",
                "latitude": "31.025",
                "longitude": "103.547"
            },
            {
                "id": 123,
                "areaCode": "510100",
                "stationName": "西岭雪山森林站",
                "latitude": "30.675",
                "longitude": "103.172"
            },
            {
                "id": 124,
                "areaCode": "510100",
                "stationName": "成都平原站",
                "latitude": "30.609",
                "longitude": "104.132"
            },
            {
                "id": 125,
                "areaCode": "513200",
                "stationName": "若尔盖黄河站",
                "latitude": "33.4003",
                "longitude": "102.4855"
            },
            {
                "id": 126,
                "areaCode": "511700",
                "stationName": "花萼山森林站",
                "latitude": "32.162",
                "longitude": "108.112"
            },
            {
                "id": 127,
                "areaCode": "511600",
                "stationName": "华蓥山森林站",
                "latitude": "30.399",
                "longitude": "106.84"
            },
            {
                "id": 128,
                "areaCode": "512000",
                "stationName": "沱江湿地站",
                "latitude": "29.97",
                "longitude": "104.692"
            },
            {
                "id": 129,
                "areaCode": "511100",
                "stationName": "岷江湿地站",
                "latitude": "29.541",
                "longitude": "103.768"
            },
            {
                "id": 130,
                "areaCode": "510400",
                "stationName": "攀枝花森林站",
                "latitude": "26.603",
                "longitude": "101.652"
            },
            {
                "id": 131,
                "areaCode": "511500",
                "stationName": "大雪山森林站",
                "latitude": "27.905",
                "longitude": "104.831"
            },
            {
                "id": 132,
                "areaCode": "513300",
                "stationName": "大渡河湿地站",
                "latitude": "30.92",
                "longitude": "101.878"
            },
            {
                "id": 133,
                "areaCode": "510700",
                "stationName": "涪江森林站",
                "latitude": "32.508",
                "longitude": "104.413"
            },
            {
                "id": 134,
                "areaCode": "511100",
                "stationName": "峨眉山森林站",
                "latitude": "29.616",
                "longitude": "103.471"
            },
            {
                "id": 135,
                "areaCode": "513300",
                "stationName": "甘孜草原站",
                "latitude": "31.616",
                "longitude": "99.958"
            },
            {
                "id": 136,
                "areaCode": "513300",
                "stationName": "巴塘森林站",
                "latitude": "30.181",
                "longitude": "99.19"
            },
            {
                "id": 137,
                "areaCode": "513400",
                "stationName": "泸沽湖湿地站",
                "latitude": "27.554",
                "longitude": "101.003"
            },
            {
                "id": 138,
                "areaCode": "513300",
                "stationName": "石渠湿地站",
                "latitude": "33.173",
                "longitude": "98.097"
            },
            {
                "id": 139,
                "areaCode": "510500",
                "stationName": "黄荆森林站",
                "latitude": "27.993",
                "longitude": "105.955"
            }
        ];

        let data = [];
        let targetSite = siteList.find(
            (item) => item.stationName === "成都森林站"
        );

        if (targetSite) {
            siteList.forEach((item) => {
                if (item.stationName != targetSite.stationName) {
                    let obj = {
                        from: {
                            city: item.stationName,
                            lnglat: [item.longitude, item.latitude],
                        },
                        to: {
                            city: targetSite.stationName,
                            lnglat: [targetSite.longitude, targetSite.latitude],
                        },
                    };

                    data.push(obj);
                }
            });
        }


        // let data = [
        //   {
        //     from: {
        //       city: '广州',
        //       lnglat: [113.270793, 23.135308]
        //     },
        //     to: {
        //       city: '衡山',
        //       lnglat: [112.612787, 27.317599]
        //     }
        //   },
        //   {
        //     from: {
        //       city: '广州',
        //       lnglat: [113.270793, 23.135308]
        //     },
        //     to: {
        //       city: '北京',
        //       lnglat: [116.413554, 39.911013]
        //     }
        //   },
        //   {
        //     from: {
        //       city: '广州',
        //       lnglat: [113.270793, 23.135308]
        //     },
        //     to: {
        //       city: '三亚',
        //       lnglat: [109.518646, 18.258217]
        //     }
        //   },
        //   {
        //     from: {
        //       city: '广州',
        //       lnglat: [113.270793, 23.135308]
        //     },
        //     to: {
        //       city: '上海',
        //       lnglat: [121.480237, 31.236305]
        //     }
        //   },
        //   {
        //     from: {
        //       city: '广州',
        //       lnglat: [113.270793, 23.135308]
        //     },
        //     to: {
        //       city: '韶关',
        //       lnglat: [113.603757, 24.816174]
        //     }
        //   }
        // ];


        const option = {
            // marker点半径
            markerRadius: 6,
            // marker点颜色,为空或null则默认取线条颜色
            markerColor: null,
            // 线条类型 solid、dashed、dotted
            lineType: 'solid',
            // 线条宽度
            lineWidth: 2,
            // 线条颜色
            colors: ['#F9815C', '#F8AB60', '#EDCC72', '#E2F194', '#94E08A', '#4ECDA5'],
            // colors: ['#F9815C',],
            // 移动点半径
            moveRadius: 3,
            // 移动点颜色
            fillColor: '#ff0000',
            // fillColor: '#007acc',
            // 移动点阴影颜色
            shadowColor: '#fff',
            // 移动点阴影大小
            shadowBlur: 6,
            data: data
        }

        let moveline = new MoveLine(map, option);

        let addBtn = document.getElementById('add');
        let removeBtn = document.getElementById('remove');

        addBtn.addEventListener('click', function () {
            console.log('add');

            moveline.reinitialize(option);
        });

        removeBtn.addEventListener('click', function () {
            console.log('remove');
            moveline.destroy();
        });


    </script>

</body>

</html>